<template>
  <div class="pages" v-html="getPageTable()" />
</template>

<script>
import getDataPrint from '../test/gettData.json'
export default {
  name: 'PrintPages',
  props: {
    dataTemplate: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      getDataPrint
    }
  },
  mounted() {
    this.getPageTable()
    console.log(this.dataTemplate)
  },
  methods: {
    getPageTable() {
      if (!this.dataTemplate) {
        return
      }
      let html = ''
      this.dataTemplate.map((item, index) => {
        // console.log(item)
        const pageHeight = item.Height - item.MarginTop - item.MarginBottom // 页面可用区域的高度
        const pageHeaderHeight = item.BorderTop // 页面页眉高度
        const pageHFootHeight = item.BorderBottom // 页面页脚高度
        const pageHBodyHeight = pageHeight - pageHeaderHeight - pageHFootHeight // 页面Body高度
        // 当前页面盒子
        const pagesBoxStart = '<div class="pagesBox" style="' + this.getPagesStyle(item) + '" >'
        const pagesBoxEnd = '</div>'
        // pageBox.push('<div class="pagesBox" style="' + this.getPagesStyle(item) + '" >')

        // pageBox.push('</div>')
        //  当前页面页眉
        const headerHtme = []
        headerHtme.push('<div class="tableBox topBox" style="' + this.getTopTableBox(item) + '" >')
        item.Top.map((itemTop, indexTop) => {
          headerHtme.push('<div class="tableItems topItem" style="' + this.getTablesItemStyle(itemTop) + '">')
          headerHtme.push('<div style="' + this.getTableBoxStyle(itemTop) + '">')
          headerHtme.push('<table class="tables topTable">')
          itemTop.Rows.map((tableRow, rowIndex) => {
            headerHtme.push('<tr>')
            tableRow.Cells.map((tableCell, cellIndex) => {
              if (!tableCell.IsMerge) {
                let className = ''
                if (tableCell.Diagonal === 0) {
                  className = ''
                } else if (tableCell.Diagonal === 1) {
                  className = className + ' zuoLine'
                } else if (tableCell.Diagonal === 2) {
                  className = className + ' youLine'
                } else if (tableCell.Diagonal === 3) {
                  className = className + ' allLine'
                }
                headerHtme.push('<td')
                headerHtme.push(' style="' + this.getCellStyle(tableCell) + '"')
                headerHtme.push(' rowspan="' + tableCell.RowSpan + '"')
                headerHtme.push(' colspan="' + tableCell.ColumnSpan + '"')
                if (itemTop.ClearBorder) {
                  className = className + ' noBorder'
                }
                headerHtme.push(' class="' + className + '">')
                headerHtme.push(' <span >')
                headerHtme.push(this.getText(getDataPrint.value.ReportJSON.SysVariable[tableCell.Text]))
                headerHtme.push(' </span>')
                headerHtme.push('</td>')
              }
            })
            headerHtme.push('</tr>')
          })
          headerHtme.push('</table>')
          headerHtme.push('</div>')
          headerHtme.push('</div>')
        })
        headerHtme.push('</div>')
        const pagesHeader = headerHtme.join(' ')

        // 当前页面页脚
        const footHtml = []
        footHtml.push('<div class="tableBox bottomBox"" style="' + this.getBottomStyle(item) + '">')
        item.Bottom.map((itemBottom, indexTop) => {
          footHtml.push('<div class="tableItems " style="' + this.getTablesItemStyle(itemBottom) + '">')
          footHtml.push('<div style="' + this.getTableBoxStyle(itemBottom) + '">')
          footHtml.push('<table class="tables ">')
          itemBottom.Rows.map((tableRow, rowIndex) => {
            footHtml.push('<tr>')
            tableRow.Cells.map((tableCell, cellIndex) => {
              if (!tableCell.IsMerge) {
                let className = ''
                if (tableCell.Diagonal === 0) {
                  className = ''
                } else if (tableCell.Diagonal === 1) {
                  className = className + ' zuoLine'
                } else if (tableCell.Diagonal === 2) {
                  className = className + ' youLine'
                } else if (tableCell.Diagonal === 3) {
                  className = className + ' allLine'
                }
                footHtml.push('<td')
                footHtml.push(' style="' + this.getCellStyle(tableCell) + '"')
                footHtml.push(' rowspan="' + tableCell.RowSpan + '"')
                footHtml.push(' colspan="' + tableCell.ColumnSpan + '"')
                if (itemBottom.ClearBorder) {
                  className = className + ' noBorder'
                  // footHtml.push(' class="noBorder"')
                }
                footHtml.push(' class="' + className + '">')
                footHtml.push(' <span >')
                footHtml.push(this.getText(getDataPrint.value.ReportJSON.SysVariable[tableCell.Text]))
                footHtml.push(' </span>')
                footHtml.push('</td>')
              }
            })
            footHtml.push('</tr>')
          })
          footHtml.push('</table>')
          footHtml.push('</div>')
          footHtml.push('</div>')
        })
        footHtml.push('</div>')
        const pagesFoot = footHtml.join(' ')
        // 当前页面Body
        const bodyHtml = []
        let bodyHtmlString = ''
        // bodyHtml.push('<div class="tableBox bodyBox" style="' + this.getTableStyle(item) + '">')
        const bodyStart = '<div class="tableBox bodyBox" style="' + this.getTableStyle(item) + '">'
        const bodyEnd = '</div>'

        bodyHtmlString = bodyHtmlString + bodyStart
        item.Body.map((itemBody, bodyIndex) => {
          const itemHtml = []
          const bodyBoxStart = '<div class="tableItems" style="' + this.getTablesItemStyle(itemBody) + '"><div style="' + this.getTableBoxStyle(itemBody) + '"><table  class="tables"><tbody>'
          const bodyBoxEnd = '</tbody></table></div></div>'
          // itemHtml.push('<div class="tableItems" style="' + this.getTablesItemStyle(itemBody) + '">')
          // itemHtml.push('<div style="' + this.getTableBoxStyle(itemBody) + '">')
          // itemHtml.push('<table  class="tables">')
          // itemHtml.push('<tbody>')
          if (!itemBody.IsBindData) { // 没有数据绑定的
            bodyHtmlString = bodyHtmlString + bodyBoxStart
            // console.log(itemBody)
            itemBody.Rows.map((tableRow, tableRowIndex) => {
              let bodyItemTrs = ''
              bodyItemTrs = bodyItemTrs + '<tr>'
              tableRow.Cells.map((tableCell, tableCellIndex) => {
                if (!tableCell.IsMerge) {
                  let className = ''
                  if (tableCell.Diagonal === 0) {
                    className = ''
                  } else if (tableCell.Diagonal === 1) {
                    className = className + ' zuoLine'
                  } else if (tableCell.Diagonal === 2) {
                    className = className + ' youLine'
                  } else if (tableCell.Diagonal === 3) {
                    className = className + ' allLine'
                  }
                  bodyItemTrs = bodyItemTrs + '<td style="' + this.getCellStyle(tableCell) + '" rowspan="' + tableCell.RowSpan + '" colspan="' + tableCell.ColumnSpan + '"'

                  if (itemBody.ClearBorder) {
                    className = className + ' noBorder'
                    // footHtml.push(' class="noBorder"')
                  }
                  bodyItemTrs = bodyItemTrs + ' class="' + className + '"'
                  bodyItemTrs = bodyItemTrs + '><span >'
                  // console.log(this.getTextShow(tableCell))
                  bodyItemTrs = bodyItemTrs + this.getTextShow(tableCell)
                  bodyItemTrs = bodyItemTrs + ' </span></td>'
                }
              })
              bodyItemTrs = bodyItemTrs + '</tr>'
              bodyHtmlString = bodyHtmlString + bodyItemTrs
            })
            bodyHtmlString = bodyHtmlString + bodyBoxEnd
          } else if (itemBody.Type === 0) { // 有绑定数据的判断类型 如果是表单类型（只有一行数据）
            bodyHtmlString = bodyHtmlString + bodyBoxStart
            itemBody.Rows.map((tableRow, tableRowIndex) => {
              let bodyItemTrs = ''
              bodyItemTrs = bodyItemTrs + '<tr>'
              tableRow.Cells.map((tableCell, tableCellIndex) => {
                if (!tableCell.IsMerge) {
                  let className = ''
                  if (tableCell.Diagonal === 0) {
                    className = ''
                  } else if (tableCell.Diagonal === 1) {
                    className = className + ' zuoLine'
                  } else if (tableCell.Diagonal === 2) {
                    className = className + ' youLine'
                  } else if (tableCell.Diagonal === 3) {
                    className = className + ' allLine'
                  }
                  bodyItemTrs = bodyItemTrs + '<td style="' + this.getCellStyle(tableCell) + '" rowspan="' + tableCell.RowSpan + '" colspan="' + tableCell.ColumnSpan + '"'
                  if (itemBody.ClearBorder) {
                    className = className + ' noBorder'
                  }
                  bodyItemTrs = bodyItemTrs + ' class="' + className + '"'
                  bodyItemTrs = bodyItemTrs + '><span >'
                  bodyItemTrs = bodyItemTrs + this.getTextShowFree(tableCell, itemBody.BindTableIndex)
                  bodyItemTrs = bodyItemTrs + ' </span></td>'
                }
              })
              bodyItemTrs = bodyItemTrs + '</tr>'
              bodyHtmlString = bodyHtmlString + bodyItemTrs
            })
            bodyHtmlString = bodyHtmlString + bodyBoxEnd
          } else if (itemBody.Type === 1) { // 有绑定数据的判断类型 如果是表格数据 可能分页
            bodyHtmlString = bodyHtmlString + bodyBoxStart
            let thead = '<tr>'
            let theadHeight = 0// 表头高度
            itemBody.Rows[0].Cells.map((tdItem, tableRowIndex) => {
              if (!tdItem.IsMerge) {
                if (tdItem.Height > theadHeight) {
                  theadHeight = tdItem.Height
                }

                let className = ''
                if (tdItem.Diagonal === 0) {
                  className = ''
                } else if (tdItem.Diagonal === 1) {
                  className = className + ' zuoLine'
                } else if (tdItem.Diagonal === 2) {
                  className = className + ' youLine'
                } else if (tdItem.Diagonal === 3) {
                  className = className + ' allLine'
                }
                if (itemBody.ClearBorder) {
                  className = className + 'noBorder'
                }
                thead = thead + '<td rowspan="' + tdItem.RowSpan + '" colspan="' + tdItem.ColumnSpan + '" style="' + this.getCellStyle(tdItem) + '" class="' + className + '">'
                thead = thead + this.getText(tdItem.Text)
                thead = thead + '</td>'
              }
            })
            thead = thead + '</tr>'
            const cellData = itemBody.Rows[itemBody.Rows.length - 1].Cells // 单元格数据
            let cellHeight = 0// 单元格高度
            cellData.map((tdItem, tdIndex) => {
              if (tdItem.Height > cellHeight) {
                cellHeight = tdItem.Height
              }
            })
            //  判断数据是否分页
            let alginItemHeight = 0
            let topHeight = 0
            for (var i = 0; i < item.Body.length; i++) {
              alginItemHeight = alginItemHeight + item.Body[i].Height
              if (i < bodyIndex) {
                topHeight = topHeight + item.Body[i].Height
              }
            }
            if (!getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables[itemBody.BindTableIndex]) {
              return
            }
            const data = getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables[itemBody.BindTableIndex].Rows
            const rows = []
            for (let i = 0; i < data.length; i++) {
              const cells = []
              for (let j = 0; j < cellData.length; j++) {
                if (cellData[j].CellIfSameMarge === 0) {
                  const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: this.getCellStyle(cellData[j]) }
                  cells.push(cell)
                } else if (cellData[j].CellIfSameMarge === 1) {
                  if (i > 0) {
                    if (data[i][j] === data[i - 1][j]) {
                      this.getRowIndex(i - 1, j, rows)
                      const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: true, style: this.getCellStyle(cellData[j]) }
                      cells.push(cell)
                    } else {
                      const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: this.getCellStyle(cellData[j]) }
                      cells.push(cell)
                    }
                  } else {
                    const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: this.getCellStyle(cellData[j]) }
                    cells.push(cell)
                  }
                } else if (cellData[j].CellIfSameMarge === 2) {
                  if (j > 0) {
                    if (data[i][j] === cells[j - 1].cellText) {
                      this.getColIndex(cells, j - 1)
                      const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: true, style: this.getCellStyle(cellData[j]) }
                      cells.push(cell)
                    } else {
                      const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: this.getCellStyle(cellData[j]) }
                      cells.push(cell)
                    }
                  } else {
                    const cell = { cellText: data[i][j], columnSpan: 1, RowSpan: 1, isMarge: false, style: this.getCellStyle(cellData[j]) }
                    cells.push(cell)
                  }
                }
                // console.log(cells)
              }
              // console.log(rows)
              rows.push(cells)
            }
            let tbody = ''
            // debugger
            if (pageHBodyHeight >= alginItemHeight + (data.length - 1) * cellHeight) {
              rows.map((item, index) => {
                tbody = tbody + '<tr>'
                item.map((cell, index) => {
                  if (!cell.isMarge) {
                    tbody = tbody + '<td rowspan="' + cell.RowSpan + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">'
                    tbody = tbody + cell.cellText
                    tbody = tbody + '</td>'
                  }
                })
                tbody = tbody + '</tr>'
              })
              const bodyItemTrs = thead + tbody
              bodyHtmlString = bodyHtmlString + bodyItemTrs
              bodyHtmlString = bodyHtmlString + bodyBoxEnd
            } else {
              const onePageNum = Math.floor((pageHBodyHeight - topHeight - theadHeight) / cellHeight)

              for (var i = 0; i < onePageNum; i++) {
                tbody = tbody + '<tr>'
                rows[i].map((cell, index) => {
                  if (!cell.isMarge) {
                    if (cell.RowSpan + i <= onePageNum) {
                      tbody = tbody + '<td rowspan="' + cell.RowSpan + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">'
                    } else {
                      tbody = tbody + '<td rowspan="' + (onePageNum - i) + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">'
                      // for(var i=(onePageNum + pageRowsNum * j);i<)
                      // debugger
                      rows[onePageNum][index].isMarge = false
                      rows[onePageNum][index].RowSpan = cell.RowSpan + i - onePageNum
                    }
                    // tbody = tbody + '<td rowspan="' + cell.RowSpan + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">'
                    tbody = tbody + cell.cellText
                    tbody = tbody + '</td>'
                  }
                })
                tbody = tbody + '</tr>'
              }
              const bodyItemTrs = thead + tbody
              bodyHtmlString = bodyHtmlString + bodyItemTrs
              const pageRowsNum = Math.floor(pageHBodyHeight / cellHeight) - 1 // 后面每页的条数
              const pageSize = Math.ceil((rows.length - onePageNum) / pageRowsNum) // 总页数
              bodyHtmlString = bodyHtmlString + bodyBoxEnd + bodyEnd + pagesFoot + pagesBoxEnd + pagesBoxStart + pagesHeader + bodyStart + bodyBoxStart

              for (var j = 1; j < pageSize + 1; j++) {
                let newPageStr = ''
                let pageTbody = ''
                for (var k = onePageNum + pageRowsNum * (j - 1); k < onePageNum + pageRowsNum * j; k++) {
                  if (rows[k]) {
                    pageTbody = pageTbody + '<tr>'
                    rows[k].map((cell, index) => {
                      if (!cell.isMarge) {
                        // let rowSpan=1
                        if (cell.RowSpan + k <= onePageNum + pageRowsNum * j) {
                          pageTbody = pageTbody + '<td  rowspan="' + cell.RowSpan + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">'
                        } else {
                          pageTbody = pageTbody + '<td rowspan="' + (onePageNum + pageRowsNum * j - k) + '" colspan="' + cell.columnSpan + '" style="' + cell.style + '">'
                          rows[onePageNum + pageRowsNum * j][index].isMarge = false
                          rows[onePageNum + pageRowsNum * j][index].RowSpan = cell.RowSpan - (onePageNum + pageRowsNum * j - k)
                        }
                        // pageTbody = pageTbody + '<svg-icon class-name="icon size-icon" icon-class="zuoxiexian" />'
                        pageTbody = pageTbody + cell.cellText
                        pageTbody = pageTbody + '</td>'
                      }
                    })
                    pageTbody = pageTbody + '</tr>'
                  }
                }
                newPageStr = newPageStr + thead + pageTbody
                if (j === pageSize) {
                  newPageStr = newPageStr + bodyBoxEnd + '<div style="border-bottom: 1px;height: 1px;"></div>'
                } else {
                  newPageStr = newPageStr + bodyBoxEnd + bodyEnd + pagesFoot + pagesBoxEnd + pagesBoxStart + pagesHeader + bodyStart + bodyBoxStart
                }
                bodyHtmlString = bodyHtmlString + newPageStr
              }
            }
          }
          bodyHtml.push(itemHtml.join(' '))
        })
        bodyHtmlString = bodyHtmlString + bodyEnd
        html += pagesBoxStart + pagesHeader + bodyHtmlString + pagesFoot + pagesBoxEnd
        // html = [...headerHtme]
      })
      // console.log(html.join(' '))

      var pageCount = 0
      html = html.replace(/@PageNum/g, function(m, i) {
        pageCount++
        return pageCount
      })
      // console.log(html)
      html = html.replace(/@PageCount/g, pageCount)
      return html
    },
    // 纸张样式
    getPagesStyle(item) {
      let style = ''
      style = style + ' width:' + (item.Width - item.MarginRight - item.MarginLeft) + 'mm; '
      style = style + ' height:' + (item.Height - item.MarginTop - item.MarginBottom) + 'mm; '
      style = style + ' padding-top:' + (item.MarginTop) + 'mm; '
      style = style + ' padding-right:' + (item.MarginRight) + 'mm; '
      style = style + ' padding-bottom:' + (item.MarginBottom) + 'mm; '
      style = style + ' padding-left:' + (item.MarginLeft) + 'mm; '
      style = style + 'page-break-before:always; '
      return style
    },
    //  页眉样式
    getTopTableBox(value) {
      let style = ''
      style = style + 'width:' + (value.Width - value.MarginLeft - value.MarginRight) + 'mm; '
      // style = style + 'height:' + value.BorderTop + 'mm; '
      style = style + 'min-height:' + value.BorderTop + 'mm; '
      style = style + 'display: inline-table; '
      style = style + 'margin: 0; '
      return style
    },
    // body样式
    getTableStyle(value) {
      let style = ''
      style = style + 'width:' + (value.Width - value.MarginLeft - value.MarginRight) + 'mm; '
      style = style + 'min-height:' + (value.Height - value.BorderTop - value.BorderBottom - value.MarginTop - value.MarginBottom) + 'mm; '
      style = style + 'display: inline-table; '
      // style = style + 'height:' + (value.Height - value.BorderTop - value.BorderBottom - value.MarginTop - value.MarginBottom) + 'mm; '
      style = style + 'margin: 0; '
      return style
    },
    //  页脚样式
    getBottomStyle(value) {
      let style = ''
      style = style + 'width:' + (value.Width - value.MarginLeft - value.MarginRight) + 'mm; '
      // style = style + 'height:' + value.BorderBottom + 'mm; '
      style = style + 'min-height:' + value.BorderBottom + 'mm; '
      style = style + 'display: inline-table; '
      style = style + 'margin: 0; '
      return style
    },
    // 表格盒子

    getTableBoxStyle(value) {
      let textLaign = 'start'
      let verticalAlign = 'top'
      const Alignment = value.Alignment
      if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
        textLaign = 'start'
      } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
        textLaign = 'center'
      } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
        textLaign = 'end'
      }
      if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
        verticalAlign = 'start'
      } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
        verticalAlign = 'center'
      } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
        verticalAlign = 'end'
      }
      let style = ''
      style = style + 'width:100%;'
      style = style + 'height:100%;'
      style = style + 'display:flex;'
      style = style + 'align-items:' + verticalAlign + ';'
      style = style + 'justify-content:' + textLaign + ';'
      return style
    },
    // 表格样式
    getTablesItemStyle(value) {
      let textLaign = 'start'
      let verticalAlign = 'top'
      const Alignment = value.Alignment
      if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
        textLaign = 'left'
      } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
        textLaign = 'center'
      } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
        textLaign = 'right'
      }
      if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
        verticalAlign = 'top'
      } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
        verticalAlign = 'middle'
      } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
        verticalAlign = 'bottom'
      }
      let style = ''
      style = style + 'width:' + value.Width + 'mm; '
      // style = style + 'height:' + value.Height + 'mm; '
      style = style + 'min-height:' + value.Height + 'mm; '
      style = style + 'display: inline-table; '
      style = style + 'margin-top:' + value.MarginTop + 'mm; '
      style = style + 'margin-right:' + value.MarginRight + 'mm; '
      style = style + 'margin-bottom:' + value.MarginBottom + 'mm; '
      style = style + 'margin-left:' + value.MarginLeft + 'mm; '
      style = style + 'text-align:' + textLaign + ';'
      style = style + ' vertical-align:' + verticalAlign + ';'
      return style
    },
    // 获取单元格样式
    getCellStyle(value) {
      let textLaign = 'center'
      let verticalAlign = 'middle'
      const Alignment = value.TextAlign
      if (Alignment === 0 || Alignment === 3 || Alignment === 6) {
        textLaign = 'left'
      } else if (Alignment === 1 || Alignment === 4 || Alignment === 7) {
        textLaign = 'center'
      } else if (Alignment === 2 || Alignment === 5 || Alignment === 8) {
        textLaign = 'right'
      }
      if (Alignment === 0 || Alignment === 1 || Alignment === 2) {
        verticalAlign = 'top'
      } else if (Alignment === 3 || Alignment === 4 || Alignment === 5) {
        verticalAlign = 'middle'
      } else if (Alignment === 6 || Alignment === 7 || Alignment === 8) {
        verticalAlign = 'bottom'
      }
      let textDecoration = ''
      if (value.Font.Underline) {
        textDecoration = textDecoration + 'underline '
      }
      if (value.Font.Strikeout) {
        textDecoration = textDecoration + 'line-through '
      }
      if (textDecoration === '') {
        textDecoration = 'none'
      }
      let style = ''
      style = style + ' width: ' + value.Width + 'mm; '
      style = style + ' height: ' + value.Height + 'mm; '
      style = style + ' text-align: ' + textLaign + ';'
      style = style + ' color: ' + value.ForeColor + ';'
      style = style + ' padding-top: ' + value.PaddingTop + 'mm; '
      style = style + ' padding-right: ' + value.PaddingRight + 'mm; '
      style = style + ' padding-bottom: ' + value.PaddingBottom + 'mm; '
      style = style + ' padding-left: ' + value.PaddingLeft + 'mm; '
      style = style + ' font-family: ' + value.Font.Name + ';'
      style = style + ' font-size: ' + value.Font.Size + 'mm; '
      style = style + ' font-weight: ' + (value.Font.Bold ? 'bold' : 'normal') + ';'
      style = style + ' font-style: ' + (value.Font.Italic ? 'italic' : 'normal') + ';'
      style = style + ' text-decoration: ' + textDecoration + ';'
      style = style + ' vertical-align: ' + verticalAlign + ';'
      style = style + ' border-top-width: ' + value.Border.Top + 'mm; '
      style = style + ' border-right-width: ' + value.Border.Right + 'mm; '
      style = style + ' border-bottom-width: ' + value.Border.Bottom + 'mm; '
      style = style + ' border-left-width: ' + value.Border.Left + 'mm; '
      style = style + ' border-color: #000;'
      style = style + ' border-style: solid;'
      style = style + ' background-color: ' + value.BackColor + ';'
      style = style + ' white-space: pre-wrap ;'
      return style
    },

    // 把表格内的数据有换行的进行处理
    getText(cellValue) {
      if (cellValue) {
        return cellValue.toString().replace(/&lt;br&gt;/g, '</br>')
      } else {
        return ''
      }
    },
    //  没有数据绑定打印时候表格数据的处理
    getTextShow(cellValue) {
      if (this.getDataPrint.value.ReportJSON.SysVariable[cellValue.Text]) {
        return this.getDataPrint.value.ReportJSON.SysVariable[cellValue.Text].toString().replace(/&lt;br&gt;/g, '</br>')
      } else {
        // console.log(cellValue.Text)
        if (cellValue.Text) {
          return cellValue.Text.toString().replace(/&lt;br&gt;/g, '</br>')
        } else {
          return ''
        }
      }
    },

    //  打印时候有数据绑定表单类型的展示数据
    getTextShowFree(cellValue, BindTableIndex) {
      if (!cellValue.ColumnName) {
        return cellValue.Text.toString().replace(/&lt;br&gt;/g, '</br>')
      } else {
        let text
        this.getDataPrint.value.ReportJSON.ReportDataJSON[0].Tables.map((items, index) => {
          if (items.Column[cellValue.ColumnName] > -1) {
            text = items.Rows[0][items.Column[cellValue.ColumnName]]
          }
        })
        return text
      }
    },

    getRowIndex(row, col, rows) {
      if (!rows[row][col].isMarge) {
        rows[row][col].RowSpan++
      } else {
        const index = row - 1
        this.getRowIndex(index, col, rows)
      }
    },
    getColIndex(cells, col) {
      if (!cells[col].isMarge) {
        cells[col].columnSpan++
      } else {
        const index = col - 1
        this.getColIndex(cells, index)
      }
    },
    pageSize(str) {
      var thisCount = 0
      str.replace(/@PageNum/g, function(m, i) {
        // m为找到的{xx}元素、i为索引
        console.log(m)
        console.log(i)
        thisCount++
        return thisCount
      })
      console.log(str)
      str.replace(/@PageCount页/g, 100)
      return str
    }
  }
}
</script>

<style scoped lang="scss">
.pages{
  ::v-deep .pagesBox {
    margin: 0 auto;
    .tableBox{
      text-align: center;
      .tableItems{
        //display: inline-table;
        //position: relative;
        .tables{
          display: inline-block;
          //margin: 0;
          //padding: 0;
          border-collapse: collapse;
          border-spacing: 0;
          //page-break-inside: avoid;
          tr {
            padding: 0;
            td {
              padding: 0;
              box-sizing:border-box;
              -moz-box-sizing:border-box; /* Firefox */
              -webkit-box-sizing:border-box; /* Safari */
            }
            .zuoLine{
              //position: relative;
              background: url("zuoLine.png")  center no-repeat;
              background-size: 100% 100%;
            }
            .youLine{
              //position: relative;
              background: url("youLine.png")  center no-repeat;
              background-size: 100% 100%;
            }
            .allLine{
              background: url("zuoLine.png")  center no-repeat , url("youLine.png")  center no-repeat;
              background-size: 100% 100%,100% 100%;
            }

            .noBorder {
              border: none !important;
            }
            .crosshair{
              cursor: crosshair;
            }
          }
        }
      }
    }
    .topBox {
      //height: auto !important;
      .topItem {
        &:first-child {
        }
      }

    }

    .bodyBox {
      background-color: #ffffff;
    }

    .bottomBox {
      //background-color: #fffdfd;
      margin-top: 5px !important;
    }
  }
}

</style>
